<template>
  <!-- 头部导航栏 -->
  <view class="navbar" :style="{ paddingTop: menu?.top + 'px' }">
    <image src="http://xcxtp.njmswl.com/images/goBack.png" class="goBack" @tap="goBack" />
    <text class="title">房源详情</text>
  </view>
  <scroll-view class="scroll-view" scroll-y>
    <!-- 图片/视频 -->
    <view class="houseImgWrapper">
      <image :src="rentHouseList?.images[0]" v-if="!toggleNumber" class="houseImg" />
      <video class="displayViedo" :src="rentHouseList?.video" v-else controls></video>
      <view v-if="!isFavorite" class="starWrapper" @click="collect">
        <image src="http://xcxtp.njmswl.com/images/star.png" class="starImg" />
      </view>
      <view v-else class="starWrapper" @click="cancleCollect">
        <image
          src="http://xcxtp.njmswl.com/images/index/allreadyStar.png"
          class="allreadystarImg"
        />
      </view>
      <view class="choose">
        <view class="chooseImg" @click="toggle(0)" :class="{ selected: !toggleNumber }">图片</view>
        <view class="chooseVideo" @click="toggle(1)" :class="{ selected: toggleNumber }">视频</view>
      </view>
    </view>
    <!-- 房子信息 -->
    <view class="houseInfo">
      <view class="houseInfo-item1">
        <view class="item1-title">
          {{ rentHouseList?.leaseType }}·{{ rentHouseList?.name }}
        </view>
        <button class="item1-share" open-type="share">
          <image src="http://xcxtp.njmswl.com/images/share.png" class="item1-img" />分享
        </button>
      </view>
      <p class="houseInfo-item2">
        <span class="houseLabel" v-for="(item, index) in labelArr" :key="index">{{
          item
        }}</span>
      </p>
      <view class="buyPrice">
        <view class="buyPrice-item">
          <p>
            <span class="averagePrice">{{ rentHouseList?.price }}</span
            ><span class="unit1">元/月</span>
          </p>
          <p class="buyPrice-text">价格({{ rentHouseList?.paymentType }})</p>
        </view>
        <view class="buyPrice-item">
          <p>
            <span class="totalPrice">{{ rentHouseList?.type }}</span>
          </p>
          <p class="buyPrice-text">户型</p>
        </view>
        <view class="buyPrice-item">
          <p>
            <span class="totalArea">{{ rentHouseList?.area }}㎡</span>
          </p>
          <p class="buyPrice-text">面积</p>
        </view>
      </view>
      <view class="houseInfo-item3">
        <view class="item3-content" v-for="(item, index) in houseInfo" :key="index">
          <span class="item3-key">{{ Object.keys(item)[0] }}</span
          ><span class="item3-value">{{ Object.values(item)[0] }}</span>
        </view>
      </view>
    </view>
    <!-- 配套设施 -->
    <view class="facilities">
      <view class="aroundText">配套设施</view>
      <view class="facilities-wrapper">
        <view class="facilities-item">
          <image src="http://xcxtp.njmswl.com/images/wash.png" class="facilitiesImg" />
          <p class="facilitiesText">洗衣机</p>
        </view>
        <view class="facilities-item">
          <image
            src="http://xcxtp.njmswl.com/images/airConditioning.png"
            class="facilitiesImg"
          />
          <p class="facilitiesText">空调</p>
        </view>
        <view class="facilities-item">
          <image
            src="http://xcxtp.njmswl.com/images/wardrobe.png"
            class="facilitiesImg"
          />
          <p class="facilitiesText">衣柜</p>
        </view>
        <view class="facilities-item">
          <image
            src="http://xcxtp.njmswl.com/images/refrigerator.png"
            class="facilitiesImg"
          />
          <p class="facilitiesText">冰箱</p>
        </view>
        <view class="facilities-item">
          <image src="http://xcxtp.njmswl.com/images/bed.png" class="facilitiesImg" />
          <p class="facilitiesText">床</p>
        </view>
      </view>
    </view>
    <!-- 周边位置 -->
    <view class="aroundLocation">
      <view class="aroundText">周边位置</view>
      <map
        style="width: 100%; height: 280rpx"
        :latitude="latitude"
        :longitude="longitude"
        :markers="covers"
        :enable-scroll="false"
      ></map>
    </view>
    <!-- 小区简介 -->
    <view class="introduce">
      <view class="aroundText">小区简介</view>
      <view class="introduceText"
        >小区是2014年交付的小区，都是高层，小区是景观房，可远观长江，
        小区是世贸物业管理，小区门口都是有保安24小时巡逻和看管，小区管理严格。</view
      >
    </view>
    <!-- 猜你喜欢 -->
    <view class="guessLike">
      <view class="aroundText">猜你喜欢</view>
      <view class="content">
        <view class="contentItem">
          <image src="http://xcxtp.njmswl.com/images/test.png" class="contentItemImg" />
          <view class="description">
            <p class="desTitle">整租·天润城(第七街区)2室1厅</p>
            <p>
              <span class="houseTag" v-for="(item, index) in tag" :key="index">{{
                item
              }}</span>
            </p>
            <p>
              <span class="allPrice">1800/月</span>
            </p>
            <p>
              <span class="houseLabel" v-for="(item, index) in label" :key="index">{{
                item
              }}</span>
            </p>
          </view>
        </view>
      </view>
    </view>

    <open-program></open-program>
  <view class="shopOwner">
      <image src="http://xcxtp.njmswl.com/images/index/shopOwner.png" class="shopOwnerImg" />
      <view>
        <p class="shopText1">袁经理</p>
        <p class="shopText2">门店店长</p>
      </view>
      <view class="wechat" @click="addWC">加微信</view>
      <view class="tel" @click="callPhone('15950585715')">打电话</view>
    </view>
  </scroll-view>
</template>
<script setup>
import openProgram from "../components/openProgram.vue";
import { onLoad, onInit, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
import { ref } from "vue";
import {
  getRentHouseAPI,
  getRentHousePageAPI,
  getRentHouseCollectionCreateAPI,
  getCommunityAPI,
} from "@/services/rentHouse";
import { createCollectAPI, deleteCollectAPI } from "@/services/myCollectHouse";
// 格式化时间戳插件 dayjs
import dayjs from "dayjs";
const menu = ref({});
const isFavorite = ref(); //用户是否收藏房源
const goBack = () => {
  uni.navigateBack();
};
const detailId = ref();
onInit(() => {});
onLoad(async (options) => {
  menu.value = uni.getMenuButtonBoundingClientRect();
  detailId.value = options.id;
  await getRentHouseList();
  // console.log("函数走这里？");
  await getCommunityList();
});
//uniapp微信小程序分享页面到微信好友
onShareAppMessage(() => {});
//uniapp微信小程序分享页面到微信朋友圈


onShareTimeline(() => {});
// 请求租房详情数据
const rentHouseList = ref();
const houseInfo = ref();
const getRentHouseList = async () => {
  // console.log("id打印一下====", detailId.value);
  const res = await getRentHouseAPI({ id: detailId.value });
  rentHouseList.value = res.data;
  isFavorite.value = res.data.isFavorite;
  houseInfo.value = [
    {
      租赁方式: rentHouseList.value.leaseType,
    },
    {
      朝向: rentHouseList.value.asaga,
    },
    {
      楼层: rentHouseList.value.floor,
    },
    {
      入住: dayjs(rentHouseList.value.checkInTime).format("YYYY-MM-DD"),
    },
    {
      车位: rentHouseList.value.parkingSpaces,
    },
    {
      电梯: rentHouseList.value.lift,
    },

    {
      用电: rentHouseList.value.electricity,
    },
    {
      用水: rentHouseList.value.waterUse,
    },

    {
      采暖: rentHouseList.value.heating,
    },
    {
      燃气: rentHouseList.value.gas,
    },

    {
      租期: rentHouseList.value.lease,
    },
    {
      看房: rentHouseList.value.viewing,
    },
  ];
  // console.log("赋值成功？", houseInfo.value);
};
// 获取小区信息
const getCommunityList = async () => {
  const res = await getCommunityAPI({ id: rentHouseList.value.communityId });
};
const label = ref(["近地铁", "新上", "精装修"]);
const labelArr = ref(["随时可住", "精装", "近地铁"]);
const tag = ref(["86.02㎡", "南", "浦口", "桥北"]);
const covers = ref([
  {
    id: 0,
    latitude: 39.909,
    longitude: 116.39742,
    iconPath: "http://xcxtp.njmswl.com/images/location.png",
    width: 18,
    height: 20,
  },
  {
    id: 1,
    latitude: 32.061973,
    longitude: 118.745211,
    iconPath: "http://xcxtp.njmswl.com/images/location.png",
    width: 18,
    height: 20,
  },
]);
let id = 0;
let latitude = 32.061973;
let longitude = 118.745211;

const userId = ref();
userId.value = JSON.parse(uni.getStorageSync("appIdKey"));
const collect = async () => {
  const res = await createCollectAPI({
    id: userId.value,
    houseId: rentHouseList.value.id,
    type: 2,
  });
  if (res.code == 0) {
    isFavorite.value = true;
    uni.showToast({
      title: "收藏成功",
      icon: "success",
    });
  }
};
//用户取消收藏
const cancleCollect = async () => {
  uni.showModal({
    content: "确认取消收藏？",
    success: async (res) => {
      if (res.confirm) {
        const res = await deleteCollectAPI({
          houseId: rentHouseList.value.id,
          type: 2,
        });
        if (res.code == 0) {
          isFavorite.value = false;
        }
      }
    },
  });
};
// 添加店长微信
const addWC = () => {
  uni.showModal({
    title: '添加指南',
    content:
      '微信号：15950585715',
    showCancel: false,
    confirmText: '复制号码',
    success: () => {
      uni.setClipboardData({
        data:'15950585715',
      })
    },
  })
}
// 打电话联系店长
const callPhone = (phoneNumber) => {
  uni.makePhoneCall({
    phoneNumber: phoneNumber, // 电话号码
    success: function () {
      console.log('拨打电话成功')
    },
    fail: function () {
      console.log('拨打电话失败')
    },
  })
}
//-----token过期---------------------------------------------------------------------
const time = ref()
function myFunction() {
  time.value = uni.getStorageSync('expiresTime')||0
  // 获取当前系统时间的时间戳
  const currentTimeTimestamp = Date.now()

  // 检查Token是否过期
  if (time.value === 0) {
  } else if (currentTimeTimestamp >= time.value) {
    uni.showToast({
      title: '登录过期，请重新登录！',
      icon: 'none',
      duration: 2000,
      mask: true,
      success: function () {
        // 清理存储
        uni.removeStorageSync('accessToken')
        uni.removeStorageSync('appIdKey')
        uni.removeStorageSync('expiresTime')

        // 使用 setTimeout 来延迟跳转
        setTimeout(function () {
          uni.switchTab({
            url: '/pages/index/index',
          });
        }, 2000); // 等待2000毫秒（与 duration 相同）
      },
    })
  } else {
  }
}
const intervalId = setInterval(myFunction, 1000)
//----------------------------------视频照片切换--------------------------------------------
const toggleNumber = ref(0) //默认显示照骗
const toggle = (number) => {
  console.log('数字展示==》》》', number)
  if (number === 0) {
    toggleNumber.value = 0
  }
  if (number === 1) {
    toggleNumber.value = 1
  }
}
//------------------------------------------------------------------------------
</script>
<style lang="less">
.displayViedo{
  width: 750rpx;
  height: 100%;
}
page {
  height: 100%;
  background-color: #f4f5fc;
  display: flex;
  flex-direction: column;
}
.scroll-view {
  flex: 1;
}
.navbar {
  margin-top: 8rpx;
  padding-bottom: 49rpx;
  background-color: #fff;
  background-size: cover;
  position: relative;
  display: flex;
  flex-direction: column;
  .goBack {
    position: absolute;
    width: 18rpx;
    height: 30rpx;
    margin-left: 56rpx;
    margin-top: 9rpx;
  }
  .title {
    text-align: center;
    font-family: PingFang SC;
    font-weight: 600;
    font-size: 36rpx;
    color: #000000;
  }
}

.houseImgWrapper {
  position: relative;
  display: flex;
  justify-content: center;
  width: 750rpx;
  height: 500rpx;
  .houseImg {
    height: 100%;
    width: 100%;
  }
}

.starWrapper {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  right: 30rpx;
  top: 25rpx;
  width: 80rpx;
  height: 80rpx;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  /* opacity: 0.6; */
  .starImg {
    width: 35rpx;
    height: 35rpx;
  }
}

.choose {
  position: absolute;
  bottom: 25rpx;
  width: 200rpx;
  height: 45rpx;
 .chooseImg {
      float: left;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100rpx;
      height: 45rpx;
      border-radius: 23rpx 0rpx 0rpx 23rpx;
      background-color: #000;
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 20rpx;
      color: #fefefe;
    }
    .chooseVideo.selected,
    .chooseImg.selected {
      background-color: #16c686;
      opacity: 1;
    }
    .chooseVideo {
      float: right;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100rpx;
      height: 45rpx;
      border-radius: 0rpx 23rpx 23rpx 0rpx;
      background-color: #000;
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 20rpx;
      color: #fefefe;
    }
}

.houseInfo {
  width: 750rpx;
  height: auto;
  padding-top: 35rpx;
  padding-left: 28rpx;
  padding-bottom: 40rpx;
  margin-bottom: 29rpx;
  background: #ffffff;
  .houseInfo-item1 {
    display: flex;
    justify-content: space-between;
    padding-right: 28rpx;
  }
  .houseInfo-item2 {
    margin-top: 14rpx;
  }
  .houseInfo-item3 {
    display: flex;
    flex-wrap: wrap;
    /* justify-content: center; */
    width: 100%;
    margin-top: 40rpx;
  }
}

.item1-title {
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 36rpx;
  color: #000000;
}

.item1-share {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150rpx;
  height: 55rpx;
  margin: 0rpx;
  font-weight: 500;
  font-size: 24rpx;
  color: #000000;
  background: #f3f4fa;
  border-radius: 28rpx;
}
.item1-img {
  width: 28rpx;
  height: 28rpx;
  margin-right: 7rpx;
}

.houseLabel {
  width: auto;
  height: 31rpx;
  background: #f3f4fa;
  border-radius: 3rpx;
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 20rpx;
  color: #687a8c;
  padding: 6rpx 11rpx;
  margin-right: 9rpx;
}
.buyPrice {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 50rpx;
}
.buyPrice-item {
  width: 33%;
}
/* 平均价格 */
.averagePrice {
  font-family: PingFang SC;
  font-weight: 600;
  font-size: 34rpx;
  color: #e75841;
}
/* 单位1 */
.unit1 {
  font-family: PingFang SC;
  font-weight: 600;
  font-size: 24rpx;
  color: #e75841;
}
/* 参考总价 */
.totalPrice,
.totalArea {
  font-family: PingFang SC;
  font-weight: 600;
  font-size: 34rpx;
  color: #000000;
}

.buyPrice-text,
.item3-key {
  font-family: PingFang SC;
  margin-top: 4rpx;
  font-weight: 400;
  font-size: 24rpx;
  color: #687a8c;
}

.item3-content {
  width: 50%;
  margin-top: 20rpx;
}

.item3-key {
  display: inline-block;
  width: 96rpx;
  margin-right: 45rpx;
}
.item3-value {
  width: auto;
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 24rpx;
  color: #000000;
}
.location {
  display: inline-block;
  text-decoration: underline;
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 24rpx;
  margin-left: 20rpx;
  color: #16c686;
}
.aroundLocation {
  width: 750rpx;
  height: 429rpx;
  padding: 40rpx 28rpx 45rpx;
  margin-bottom: 22rpx;
  background: #ffffff;

  .map {
    width: 695rpx;
    height: 280rpx;
  }
}

.guessLike {
  width: 100%;
  padding: 40rpx 28rpx 5rpx;
  background-color: #fff;
  margin-top: 21rpx;

  .content {
    display: flex;
    width: 750rpx;
    height: auto;
    background-color: #fff;
  }
  .contentItem {
    flex: 1;
    display: flex;
    align-items: center;
    width: 100%;
    height: 230rpx;
    margin-right: 27rpx;
    border-bottom: 1rpx solid #eeeeee;
  }
  .content:last-child .contentItem {
    border-bottom: none;
  }
  .contentItemImg {
    width: 210rpx;
    height: 155rpx;
    background: #000000;
    border-radius: 5rpx;
    margin-right: 21rpx;
  }
  .desTitle {
    width: 410rpx;
    font-family: PingFang SC;
    font-weight: 550;
    font-size: 30rpx;
    color: #000000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .allPrice {
    font-family: PingFang SC;
    font-weight: 600;
    font-size: 30rpx;
    color: #e75841;
    margin-right: 14rpx;
  }
  .avgPrice {
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 22rpx;
    color: #989b9e;
  }
  .houseTag {
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 20rpx;
    color: #020609;
    margin-right: 20rpx;
  }
}
.shopOwner {
  position: fixed;
  bottom: 0rpx;
  display: flex;
  align-items: center;
  width: 694rpx;
  height: 110rpx;
  padding-right: 26rpx;
  margin-left: 27rpx;
  background: rgba(0, 0, 0, 0.75);
  border-radius: 15rpx;

  .shopOwnerImg {
    width: 65rpx;
    height: 65rpx;
    margin-left: 28rpx;
    margin-right: 22rpx;
  }

  .shopText1 {
    width: 120rpx;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    color: #ffffff;
  }

  .shopText2 {
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 22rpx;
    color: #b5b5b5;
  }

  .wechat {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 134rpx;
    height: 50rpx;
    margin-left: 210rpx;
    margin-right: 16rpx;
    background: #3bc48b;
    border-radius: 25rpx;

    font-family: PingFang SC;
    font-weight: 500;
    font-size: 24rpx;
    color: #ffffff;
  }

  .tel {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 134rpx;
    height: 50rpx;
    background: #3072f5;
    border-radius: 25rpx;

    font-family: PingFang SC;
    font-weight: 500;
    font-size: 24rpx;
    color: #ffffff;
  }
}
.facilities {
  width: 750rpx;
  height: 240rpx;
  background: #ffffff;
  padding: 40rpx 28rpx;
  margin-bottom: 23rpx;
  .facilities-wrapper {
    display: flex;
    width: 100%;
    // margin-left: 27rpx;
    justify-content: center;
  }
  .facilities-item {
    width: 20%;
    text-align: center;
  }
  .facilitiesImg {
    width: 68rpx;
    height: 68rpx;
  }
  .facilitiesText {
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 24rpx;
    color: #687a8c;
  }
}
.aroundText {
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 36rpx;
  margin-bottom: 20rpx;
  color: #000000;
}
.introduce {
  width: 750rpx;
  height: auto;
  background: #ffffff;
  padding: 40rpx 28rpx;
  .introduceText {
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 24rpx;
    color: #687a8c;
    line-height: 40rpx;
  }
}
</style>
